<template>
  <view class="game_container">
    <md-nav-bar title="打卡列表" backgroundColor="transparent" />
    <uni-notice-bar
      v-if="data.template_code !== 'single' && data.tipText"
      single
      color="#fff"
      background-color="#D92121"
      :text="data.tipText" />
    <view class="game_wrap">
      <!-- <view class="game_title">
        {{ data.group_name }}
      </view> -->

      <!-- 任务列表 -->
      <block v-for="item in data.tasklist" :key="item.id">
        <view @click="() => handleItem(item)" :class="['game_item', data.stauts_map?.[item.check_status] || '']">
          <!-- 背景图 -->
          <!-- 打卡成功 -->
          <image class="game_item_bg" src="@/static/images/point_success_bg.png" v-if="item.check_status == 2"></image>
          <!-- 打卡异常 -->
          <image
            class="game_item_bg"
            src="@/static/images/point_warning_bg.png"
            v-else-if="item.check_status == 3"></image>
          <!-- 打卡失败 -->
          <image
            class="game_item_bg"
            src="@/static/images/point_error_bg.png"
            v-else-if="item.check_status == 4"></image>
          <!-- 去打卡 -->
          <image class="game_item_bg" src="@/static/images/point_default_bg.png" v-else></image>
          <view class="game_item_content">
            <view class="item_left">
              <md-icon v-if="item.check_status == 1" name="default_check" width="40" height="40"></md-icon>
              <md-icon v-else name="active_check" width="40" height="40"></md-icon>
            </view>
            <view class="item_right flex-1 flex-b">
              <view :class="['name', 'ellipsis-1', item.check_status > 1 ? 'text-white' : '']">
                {{ item.point_name }}
              </view>
              <view v-if="item.check_status >= 1">
                <!-- 打钩 -->
                <md-icon type="bg" name="dagou" width="102" height="102" v-if="item.check_status == 2" />
                <!-- 感叹号 -->
                <md-icon type="bg" name="gantanhao" width="54" height="102" v-else-if="item.check_status == 3" />
                <!-- 打叉 -->
                <md-icon type="bg" name="dacha" width="95" height="102" v-else-if="item.check_status == 4" />
                <view class="right_text" :style="{ color: data.configInfo?.select_color_text }" v-else>去打卡 >></view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>

    <!-- 刷新按钮 -->
    <image class="refresh" src="@/static/images/point/refresh.png" @click="getMatchList" />
    <!-- 返回首页按钮 -->
    <image class="refresh map-detail" src="@/static/images/point/home.png" @click="handleHome" />
    <!-- 举报 -->
    <image class="refresh report" src="@/static/images/point/report.png" @click="handleReport" />

    <!-- 底部按钮 -->
    <view class="footer-container shadow flex-l">
      <md-button
        v-if="data.template_code !== 'single'"
        class="button flex-1"
        @click="() => bottomBtnClick('map')"
        title="返回地图"
        :color="data.configInfo?.button_color1 || '#d92121'"
        :text-color="data.configInfo?.button_color1_text || '#ffffff'" />
      <md-button
        class="button flex-1"
        @click="() => bottomBtnClick('check')"
        title="查看成绩"
        :color="data.configInfo?.button_color3 || '#d92121'"
        :text-color="data.configInfo?.button_color3_text || '#ffffff'" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';
import { reactive } from 'vue';
// 接口
import { matchPoint } from '@/api';
import { calculateDistance, getLocation, getWXUserLocation } from '@/utils/util';
import type { Match } from '@/api/data';

const data = reactive<any>({
  tipText: '', // 头部提示文案 // 领取奖牌需要打卡下方至少0个地点(不包含补给点)
  check_num: 0, // 打卡点 已打卡数量
  end_status: 1, // 终点打卡情况 1:未打卡 2：已打卡
  configInfo: {},
  active_id: null, // 比赛ID
  btnTextItems: [
    { text: '返回地图', key: 'map' },
    { text: '查看成绩', key: 'result', color: '#1CA4C0' },
  ],
  tasklist: [], // 任务列表
  group_name: '', // 组别名称
  stauts_map: {
    2: 'success',
    3: 'warning',
    4: 'error',
  },
  template_code: '', // 模板编码
});

const handleItem = (item: Match.Point.Data) => {
  // // 测距离
  getLocation().then(res => {
    const distanceKm = calculateDistance(
      res.latitude,
      res.longitude,
      Number(item.latitude),
      Number(item.longitude),
      'm'
    );

    if (data.template_code !== 'single' && item.distance !== -1 && distanceKm >= item.distance) {
      uni.showModal({
        title: '提示',
        content: '您未到打卡区域,距离：' + distanceKm.toFixed(4) + '米',
        showCancel: false,
      });
      return;
    }
    // 打卡点1、补给点3、起点5、终点6
    if (item.type.includes('1') || item.type.includes('3') || item.type.includes('5') || item.type.includes('6')) {
      // 检查是否为AR打卡点 4:ar打卡
      if ([4].includes(item.dk_type)) {
        // AR打卡
        uni.navigateTo({
          url: `/pages/ar/ar-checkin?point_id=${item.id}&active_id=${data.active_id}`,
        });
      } else {
        if ([1, 3].includes(item.dk_type)) {
          // 1：用户扫码 2：上传图片 3：二维码打卡
          uni.navigateTo({
            url: `/pages/other/match/points/scan-code?dk_type=${item.dk_type}&point_id=${item.id}`,
          });
        } else {
          uni.navigateTo({
            url: '/pages/other/match/points/upload-image?point_id=' + item.id,
          });
        }
      }
    }
  });
};

const bottomBtnClick = async (key: string) => {
  // 返回地图
  if (key === 'map') {
    uni.redirectTo({
      url: '/pages/other/match/map/index?active_id=' + data.active_id,
    });
  } else {
    // 查看成绩
    // 如果是已经打了终点卡
    if (data.end_status === 2) {
      uni.navigateTo({
        url: '/pages/other/match/points/score?active_id=' + data.active_id,
      });
    } else {
      uni.showModal({
        title: '提示',
        content: '已打卡点数：' + data.check_num + '个',
        showCancel: false,
      });
    }
  }
};

// 返回首页
function handleHome() {
  uni.switchTab({ url: '/pages/index/index' });
}

// 举报
const handleReport = () => {
  uni.navigateTo({
    url: '/pages/report/index',
  });
};

/**
 * 接口相关
 */

// 比赛列表
async function getMatchList() {
  uni.showLoading({
    title: '加载中...',
    mask: true,
  });
  let active_id = data.active_id;
  try {
    const res = await matchPoint({ active_id });
    data.tipText = res?.data?.info;
    data.check_num = res?.data?.check_num || 0;
    data.end_status = res?.data?.end_status || 1;
    data.tasklist = res?.data?.pointList;
  } catch (error) {}
  uni.hideLoading();
}

/**
 * 生命周期函数--监听页面加载
 */
onLoad(function (options) {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
  }
  data.active_id = options?.active_id;
  data.template_code = options?.template_code;

  // 经纬度授权
  getWXUserLocation();
});

/**
 * 生命周期函数--监听页面显示
 */
onShow(function () {
  getMatchList();
});
</script>

<style lang="scss" scoped>
.game_container {
  width: 750rpx;
  height: calc(100vh - 104rpx - $safe-bottom);
  background: url(https://jogging.qzctdg.com/uploads/custom/20241109/98c5b9aaab2889f3c9fe844039c65c91.jpeg) no-repeat;
  background-size: cover;
  overflow: auto;
  padding-bottom: calc(104rpx + $safe-bottom);
}

// https://jogging.qzctdg.com/uploads/ads/20241019/a9e4efd53968e259b7fd312af8224c5d.png
.game_wrap {
  padding-right: 30rpx;
  box-sizing: border-box;
  margin-left: 46rpx;
  border-left: 1rpx solid #1ca4c0;
}

.game_title {
  font-size: 34rpx;
  text-align: center;
  padding-top: 30rpx;
  margin-bottom: 15rpx;
  font-weight: bold;
}

.game_item {
  width: 100%;
  height: 102rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  position: relative;
  .game_item_bg {
    width: 100%;
    height: 102rpx;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  .game_item_content {
    width: 100%;
    padding-left: 54rpx;
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
  }

  .item_left {
    position: absolute;
    left: -20rpx;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .item_right {
    text-align: center;
    font-weight: bold;
    .text-white {
      color: white;
    }
    .name {
      font-size: 26rpx;
    }
    .right_text {
      // color: #1ca4c0;
      margin-right: 25rpx;
    }
  }
}

.item_left_icon {
  width: 32rpx;
  height: 32rpx;
}

.footer-container {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0 30rpx $safe-bottom;
  box-sizing: border-box;
  gap: 20rpx;
  z-index: 99;
}

/* 刷新按钮 */
.refresh {
  width: 90rpx;
  height: 90rpx;
  position: fixed;
  left: 10rpx;
  bottom: 395rpx;
  z-index: 99;
}

/* 查看地图 */
.map-detail {
  bottom: 285rpx;
}

/* 举报 */
.report {
  bottom: 180rpx;
}
</style>
